<template>
  <div class="oe-preview-exam" v-loading="loading">
    <info-top @toggleCollapsed="toggleCollapsed" :userShow="false"></info-top>
    <div class="oe-exam-content">
      <div class="oe-exam-top">
        {{ title }}
        <div class="fr" style="color: #1E8DFD;cursor: pointer" @click="getTo">
          <span class="iconfont icon-fanhui"></span>
          返回
        </div>
      </div>
      <div class="clearfix" style="margin-top: 20px;">
        <div id="home-tab" class="answer-sheet fl" :class="{ 'fixed-style': scrollTop - 20 > tabOffsetTop }">
          <div class="answer-sheet-top">答题卡</div>
          <div class="answer-sheet-list">
            <div>
              <div class="quetion-type-list">
                <a v-for="(item, index) in answerSheetList" :key="index" :href="'#' + item.QuestionId">
                  <span class="que-type-lis queActivate" v-if="list[index].IsAssignmented && item.IsRight == 1">{{ item.num }}</span>
                  <span class="que-type-lis queActivate1" v-else-if="list[index].IsAssignmented && item.IsRight == 2">{{ item.num }}</span>
                  <span class="que-type-lis queActivate2" v-else-if="list[index].IsAssignmented && item.IsRight == 3">{{ item.num }}</span>
                  <span class="que-type-lis" v-else>{{ item.num }}</span>
                </a>
              </div>
            </div>
          </div>
          <div class="answer-bottom clearfix">
            <div class="fr"><span class="answer-dian" style="background:#FF8400;"></span>半对</div>
            <div class="fr"><span class="answer-dian" style="background:#D50101;"></span>错</div>
            <div class="fr"><span class="answer-dian" style="background:#0177D5;"></span>对</div>
            <div class="fr"><span class="answer-dian"></span>未批</div>
          </div>
          <div class="answer-stu" v-if="isShowScore">
            <span class="answer-stu-span">试卷总分:</span>
            {{ getTotalScore }}分
          </div>
        </div>
        <div class="oe-quetion-list fr">
          <testPaper v-if="questionShow" :mode="testPaperMode" :questionData="questionData" :allAnswerList="allAnswerList"></testPaper>
        </div>
      </div>
    </div>
    <a-modal title="提示" :closable="false" :keyboard="false" :maskClosable="false" :visible="!isSyncOver">
      <template slot="footer">
        <a-button key="submit" type="primary" :loading="loading" @click="getTo">确定</a-button>
      </template>
      <p style="font-size: 20px;">作答记录正在同步中，请稍后查看</p>
    </a-modal>
  </div>
</template>

<script>
// 对HTML标签进行过滤, 防止XSS攻击
import xss, { whiteList } from 'xss';

import testPaper from '@/components/testPaper/index.vue';
import infoTop from '@/components/info-top/index.vue';
// xss 选项
const xss_options = {};
export default {
  components: {
    infoTop,
    testPaper
  },
  props: {
    Id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      title: '',
      list: [],
      answerSheetList: [],
      queList: [],
      isShowScore: false,
      isShowQuesType: false,
      isShowBaseScore: false,
      loading: false,
      isSyncOver: true,
      tabOffsetTop: 0,
      scrollTop: 0,
      getTotalScore: 0,
      questionShow: false,
      questionData: {},
      allAnswerList: []
    };
  },
  computed: {
    testPaperMode(){  //未同步隐藏参考答案
      return this.isSyncOver ? 'check' : 'hide'
    }
  },
  created() {
    this.$nextTick(() => {
      let tabEle = document.getElementById('home-tab');
      this.tabOffsetTop = tabEle.offsetTop;
      window.addEventListener('scroll', this.handleScroll);
    });
  },
  mounted() {
    this.examPreview();
  },
  methods: {
    examPreview() {
      this.loading = true;
      this.$http
        .post('/api/study/workexam/onLineExamPreview', {
          examId: this.Id //考试Id
        })
        .then((res) => {
          this.loading = false;
          this.title = res.title;
          this.list = res.list;
          this.setAllQuestionAnswer(res.list)
          this.questionData = res;
          this.isSyncOver = res.isSyncOver; //是否同步结束
          this.isShowScore = res.isShowScore; //是否展示学生得分
          this.isShowQuesType = res.isShowQuesType; //是否展示题型
          this.isShowBaseScore = res.isShowBaseScore; //是否展示分数
          this.getTotalScore = res.getScore; //总分
          this.getQueType();
          this.questionShow = true;
        });
    },
    setAllQuestionAnswer(list) {
      this.allAnswerList = [];
      for (let i = 0; i < list.length; i++) {
        if (list[i].QuestionType == 8 || list[i].QuestionType == 9 || list[i].QuestionType == 11 || list[i].QuestionType == 12 || list[i].QuestionType == 13) {
          let lis = {
            questionId: list[i].QuestionId, //题目Id
            questionJson: list[i].StuAnswer, //题目答案
            subQuesList: []
          };
          for (let key = 0; key < list[i].SubQuesList.length; key++) {
            let childLis = {
              questionId: list[i].SubQuesList[key].QuestionId, //题目Id
              questionJson: list[i].SubQuesList[key].SubStuAnswer //题目答案
            };
            lis.subQuesList.push(childLis);
          }
          this.allAnswerList.push(lis);
        } else {
          let lis = {
            questionId: list[i].QuestionId, //题目Id
            questionJson: list[i].StuAnswer, //题目答案
            subQuesList: []
          };
          this.allAnswerList.push(lis);
        }
      }
    },
    getQueType() {
      // 题目类型 1.单选题(客观),2.多选题(客观),3.判断(客观),5.填空题(主观),6.问答题(主观),7.匹配题(客观),8.阅读理解(客观),9.完形填空(客观),10.文件作答题(主观),11.视听题(客观)
      for (let i = 0; i < this.list.length; i++) {
        var lis = {
          num: i + 1,
          Answer: false,
          QuestionId: this.list[i].QuestionId,
          IsRight: this.list[i].IsRight
        };
        if (this.list[i].QuestionType == 5) {
          lis.Answer = this.list[i].StuFillAnswer;
        } else if (
          this.list[i].QuestionType == 8 ||
          this.list[i].QuestionType == 9 ||
          this.list[i].QuestionType == 11 || 
          this.list[i].QuestionType == 12 || 
          this.list[i].QuestionType == 13
        ) {
          for (let key = 0; key < this.list[i].SubQuesList.length; key++) {
            if (this.list[i].SubQuesList[key].StuAnswerStr) {
              lis.Answer = true;
            }
          }
        } else {
          lis.Answer = this.list[i].StuAnswer;
        }
        this.answerSheetList.push(lis);
      }
    },
    getTo() {
      this.$router.push({name:'end'});
    },
    handleScroll() {
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        document.scrollingElement.scrollTop ||
        0;
    },
    getScore(e) {
      console.log(e);
    }
  }
};
</script>
